<template>
    <div>
      <div class="crumbs">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item
          v-for="(item,index) in breadList"
          :key="index"
          :to="{ path: item.path }"
        >{{item.meta.title}}</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="container">
        <div class="handle-box">
          <el-select v-model="query.orderStatus" placeholder="订单状态" class="handle-select mr10">
            <el-option key="0" label="未支付" value="0"></el-option>
            <el-option key="1" label="已支付" value="1"></el-option>
            <el-option key="2" label="已完成" value="2"></el-option>
          </el-select>
          <el-input v-model="query.orderId" placeholder="订单id" class="handle-input mr10"></el-input>
          <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        </div>
        <el-table :data="tableData" border class="table" ref="multipleTable" header-cell-class-name="table-header">
          <el-table-column prop="orderId" label="订单ID" width="70" align="center"></el-table-column>
          <el-table-column prop="userId" label="用户" width="85"></el-table-column>
          <el-table-column prop="ticketId" label="门票单价" width="85"></el-table-column> 
          <el-table-column prop="ticketNum" label="门票数量" width="85"></el-table-column>
          <el-table-column prop="totalPrice" label="总价"></el-table-column>
          <el-table-column label="状态" align="center" width="80">
            <template #default="scope">
              <el-tag :type="scope.row.orderStatus == '2'
                  ? 'success'
                  : scope.row.orderStatus == '1'
                  ? 'warning'
                  : scope.row.orderStatus == '0'
                    ? 'danger'
                    : 'warning'
                    
                ">
                {{
                  scope.row.orderStatus == '2'
                  ? '已完成'
                  : scope.row.orderStatus == '1'
                  ? '已支付'
                  : scope.row.orderStatus == '0'
                    ? '未支付'
                    : '待支付'
                }}
              </el-tag>
            </template>
          </el-table-column>
  
          <el-table-column prop="createdAt" label="注册时间"></el-table-column>
          <el-table-column label="操作" width="180" align="center">
            <template #default="scope">
              <el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-popconfirm title="确定要删除此订单" confirm-button-text="确定" cancel-button-text="取消"
                @confirm="handleDelete(scope.$index, scope.row)">
                <template #reference>
                  <el-button size="small" type="danger">删除</el-button>
                </template>
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination v-if="totalCount" v-model:currentPage="query.currentPage" v-model:page-size="query.pageSize"
            layout="prev, pager, next, jumper" :total="totalCount" @current-change="handleCurrentChange" />
        </div>
      </div>
      <el-dialog v-model="centerDialogVisible" title="订单编辑" width="40%">
        <div>
          <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="120px" status-icon>

            <!-- <el-form-item label="用户名" prop="userId">
              <el-input v-model="ruleForm.userId"  />
            </el-form-item>

            <el-form-item label="门票单价" prop="ticketId">
              <el-input v-model="ruleForm.ticketId"  />
            </el-form-item>

            <el-form-item label="门票数量" prop="ticketNum">
              <el-input v-model="ruleForm.ticketNum"  />
            </el-form-item>

            <el-form-item label="总价" prop="totalPrice">
              <el-input v-model="ruleForm.totalPrice"  />
            </el-form-item> -->

            <el-form-item label="订单状态" prop="orderStatus">
              <el-radio-group v-model="ruleForm.orderStatus">
                <el-radio :label="0">未支付</el-radio>
                <el-radio :label="1">已支付</el-radio>
                <el-radio :label="2">已完成</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button type="primary" @click="submitForm(ruleFormRef)">更新</el-button>
            <el-button @click="resetForm(ruleFormRef)">重置表单</el-button>
            <el-button @click="centerDialogVisible = false">取消</el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </template>
  <script>
  import { useRouter, useRoute } from 'vue-router'
  import { ref, reactive, watch } from "vue";
  import request from "../../utils/request";
  import { ElNotification } from "element-plus";
  export default {
    setup() {
      let breadList = [] // 路由集合
      const route = useRoute()
      const getBreadcrumb=(url)=> {
        let matched = url.matched;
        //如果不是首页
        if ("Home"==matched[0].name) {
          matched[0].meta =  { title: "系统首页" } 
        }
        breadList = matched;
      }
      watch(route, (newValue, oldValue) => {
        // console.log(222222,newValue)
        getBreadcrumb(newValue)
      },{ deep: true, immediate: true });
      
      const resetForm = (formEl) => {
        if (!formEl) return;
        formEl.resetFields();
      };
      const submitForm = async (formEl) => {
        if (!formEl) return;
        await formEl.validate((valid, fields) => {
          if (valid) {
            // console.log("提交更新", fields);
            request
              .request({
                url: "/order/alter",
                method: "post",
                data: {
                  orderId: ruleForm.orderId,
                  // userId: ruleForm.userId,
                  // ticketId: ruleForm.ticketId,
                  // ticketNum: ruleForm.ticketNum,
                  // totalPrice: ruleForm.totalPrice,
                  orderStatus: ruleForm.orderStatus,
                  
                },
              })
              .then((res) => {
                if (res.data.code == 200) {
                  ElNotification({
                    title: "更新成功",
                    message: "成功更新订单信息",
                  });
                  getData();
                } else {
                  ElNotification({
                    title: "更新失败",
                    message: "请联系管理员检查失败原因",
                  });
                }
              })
              .catch((e) => {
                ElNotification({
                  title: "更新失败",
                  message: "请联系管理员检查失败原因",
                });
              });
          } else {
            ElNotification({
              title: "校验失败",
              message: "请重新填写信息",
            });
          }
        });
      };
      const ruleForm = reactive({
        orderId: "",
        userId:"",
        ticketId:"",
        ticketNum: "",
        totalPrice: "",
        orderStatus: "",
      });
      const rules = reactive({
        // userId: [
        //   {
        //     required: true,
        //     message: "请输入用户名",
        //     trigger: "blur",
        //   },
        // ],
        // ticketId: [
        //   {
        //     required: true,
        //     message: "请输入门票单价",
        //     trigger: "blur",
        //   },
        // ],
        // ticketNum: [
        //   {
        //     required: true,
        //     message: "请输入票价数量",
        //     trigger: "blur",
        //   },
        // ],
        // totalPrice: [
        //   {
        //     required: true,
        //     message: "请输入总价",
        //     trigger: "blur",
        //   },
        // ],
        orderStatus: [
          {
            required: true,
            message: "请选择订单状态",
            trigger: "change",
          },
        ],
      });
      const ruleFormRef = ref();
      const centerDialogVisible = ref(false);
      const query = reactive({
        // username: "",
        orderId: "",
        orderStatus:"",
        currentPage: 1,
        pageSize: 5,
      });
      const tableData = ref([]);
      const totalCount = ref(0);
      const pageTotal = ref(0);
      // 获取表格数据
      const getData = () => {
        request
          .request({
            url: "/order/getAllOrdersByPage",
            params: {
              //type: query.type,
              orderId: query.orderId,
              orderStatus:query.orderStatus,
              currentPage: query.currentPage,
              pageSize: query.pageSize,
            },
            method: "get",
          })
          .then((res) => {
            //获取当前页的数据
            tableData.value = res.data.data.rows;
            //获取总记录数
            getUserName(tableData.value);
            // getTicketPrice(tableData.value);
            // getTicketType(tableData.value);
            totalCount.value = res.data.data.count;
          })
          .catch((e) => {
            console.log(e);
          });
      };
      getData();
      
      const getUserName=(e)=>{
      //获取用户
      e.forEach(function(item,index)  {
        request
        .request({
          url:"/user/getUsersById",
          params:{
            userId:e[index].userId,
          },
          method:"get",
        })
        .then((res) => {
          e[index].userId=res.data.data.userName
        })
       })
      }

      // const getTicketPrice=(e)=>{
      // //获取门票单价
      // e.forEach(function(item,index) {
      //   request
      //   .request({
      //     url:"/ticket/getTicketById",
      //     params:{
      //       ticketId:e[index].ticketId,
      //     },
      //     method:"get",
      //   })
      //   .then((res) => {
      //     console.log(res.data.data.ticketPrice)
      //     e[index].ticketId=res.data.data.ticketPrice
         
      //   })
      //  })
      // }

      // const getTicketType=(e)=>{
      // //获取门票类型
      // e.forEach(function(item,index) {
      //   request
      //   .request({
      //     url:"/ticket/getTicketById",
      //     params:{
      //       ticketId1:e[index].ticketId,
      //     },
      //     method:"get",
      //   })
      //   .then((res) => {
      //     console.log(res.data.data.ticketType)
      //     e[index].ticketId=res.data.data.ticketType
         
      //   })
      //  })
      // }

       // 查询操作
      const handleSearch = () => {
        getData();
      };
      // 分页导航
      const handleCurrentChange = (val) => {
        query.currentPage = val;
        getData();
      };
      // 删除操作
      const handleDelete = (index, row) => {
        request
          .request({
            url: "/order/del",
            method: "get",
            params: {
                orderId: row.orderId,
            },
          })
          .then((res) => {
            if (res.data.msg == "success") {
              getData();
              ElNotification({
                title: "删除成功",
                message: "成功删除用户信息",
              });
            } else {
              ElNotification({
                title: "删除失败",
                message: "请联系管理员检查失败原因",
              });
            }
          })
          .catch((e) => {
            ElNotification({
              title: "删除失败",
              message: "请联系管理员检查失败原因",
            });
          });
      };
      const handleEdit = (index, row) => {
        centerDialogVisible.value = true;
        // ruleForm.userId = row.userId;
        // ruleForm.ticketId = row.ticketId;
        // ruleForm.ticketNum = row.ticketNum;
        // ruleForm.totalPrice = row.totalPrice;
        ruleForm.orderId = row.orderId;
        ruleForm.orderStatus = row.orderStatus;
      };
      return {
        breadList,
        resetForm,
        ruleFormRef,
        submitForm,
        ruleForm,
        rules,
        centerDialogVisible,
        query,
        totalCount,
        tableData,
        getData,
        handleEdit,
        handleSearch,
        handleCurrentChange,
        handleDelete,
        getUserName,
        // getTicketPrice,
        // getTicketType,
      };
    },
  };
  </script>
  <style lang="scss" scoped>
  .handle-box {
    margin-bottom: 20px;
  }
  
  .handle-select {
    width: 120px;
  }
  
  .handle-input {
    width: 300px;
    display: inline-block;
  }
  
  .table {
    width: 100%;
    font-size: 14px;
  }
  
  .red {
    color: #ff0000;
  }
  
  .mr10 {
    margin-right: 10px;
  }
  
  .table-td-thumb {
    display: block;
    margin: auto;
    width: 40px;
    height: 40px;
  }
  </style>
  